<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Notion-like 编辑器（重新实现 AI 提示与对话框）</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="settings.css">
    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📝</text></svg>">
    <style>
        /* 隐藏左侧书签面板 */
        .sidebar {
            display: none;
        }
        
        /* 隐藏格式按钮 */
        .toolbar button[onclick="formatText('bold')"],
        .toolbar button[onclick="formatText('italic')"],
        .toolbar button[onclick="formatText('h1')"] {
            display: none;
        }
        
        /* 隐藏AI对话框 */
        .chat-input-container {
            display: none !important;
        }
        
        /* 添加左侧导航栏样式 */
        body {
            display: flex;
            background-color: #f7f7f7;
            margin: 0;
            padding: 0;
            height: 100vh;
            overflow: hidden;
        }
        
        .side-navigation {
            width: 240px;
            background-color: #f7f7f7;
            border-right: 1px solid #e3e3e3;
            height: 100vh;
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
            overflow-y: auto;
        }
        
        .side-header {
            display: flex;
            align-items: center;
            padding: 14px;
            border-bottom: 1px solid #e3e3e3;
        }
        
        .workspace-icon {
            width: 24px;
            height: 24px;
            border-radius: 3px;
            background-color: #eee;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 8px;
            font-weight: 500;
        }
        
        .workspace-name {
            font-size: 14px;
            flex: 1;
        }
        
        .search-container {
            padding: 8px 14px;
            position: relative;
        }
        
        .search-input {
            width: 100%;
            padding: 8px 12px;
            padding-left: 30px;
            border-radius: 4px;
            border: 1px solid #e3e3e3;
            background-color: #fff;
            font-size: 14px;
        }
        
        .search-icon {
            position: absolute;
            left: 24px;
            top: 16px;
            color: #999;
        }
        
        .pages-section {
            padding: 0 8px;
            flex: 1;
            overflow-y: auto;
        }
        
        .section-header {
            display: flex;
            align-items: center;
            padding: 8px 10px;
            font-size: 12px;
            color: #999;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .section-header span {
            flex: 1;
        }
        
        .add-page-btn {
            width: 18px;
            height: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 3px;
            cursor: pointer;
        }
        
        .add-page-btn:hover {
            background-color: #eee;
        }
        
        .pages-tree {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        
        .page-item {
            padding: 0;
            margin: 0;
        }
        
        .page-row {
            display: flex;
            align-items: center;
            padding: 4px 8px;
            border-radius: 3px;
            cursor: pointer;
            margin-bottom: 1px;
            position: relative;
        }
        
        .page-row:hover {
            background-color: rgba(55, 53, 47, 0.08);
        }
        
        .page-row.active {
            background-color: rgba(55, 53, 47, 0.08);
        }
        
        .toggle-btn {
            width: 18px;
            height: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: #999;
            transition: transform 0.2s;
        }
        
        .toggle-btn.expanded {
            transform: rotate(90deg);
        }
        
        .page-icon {
            margin: 0 4px;
            font-size: 14px;
            width: 18px;
            text-align: center;
        }
        
        .page-title {
            font-size: 14px;
            margin-left: 4px;
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .page-title.editing {
            background: #fff;
            padding: 2px 4px;
            border: 1px solid #999;
            border-radius: 2px;
        }
        
        .subpages {
            list-style-type: none;
            padding-left: 20px;
            display: none;
        }
        
        .subpages.expanded {
            display: block;
        }
        
        .context-menu {
            position: absolute;
            background: white;
            border: 1px solid #e3e3e3;
            border-radius: 4px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            padding: 4px 0;
            z-index: 100;
        }
        
        .menu-item {
            padding: 6px 14px;
            font-size: 14px;
            cursor: pointer;
        }
        
        .menu-item:hover {
            background-color: #f5f5f5;
        }
        
        /* 优化编辑器容器样式 */
        .container {
            flex: 1;
            height: 100vh;
            overflow: auto;
            background-color: #ffffff;
        }
        
        .editor-container {
            margin: 20px auto;
            max-width: 800px;
            padding: 40px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            border-radius: 3px;
            background-color: #ffffff;
        }
        
        /* 优化聊天输入区域 */
        .chat-input-container {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 300px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.15);
            padding: 12px;
            border: 1px solid #e3e3e3;
            z-index: 10;
        }
        
        /* 调试面板 */
        .debug-panel {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: white;
            border: 1px solid #ccc;
            border-radius: 4px;
            padding: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            z-index: 1000;
        }
        
        .debug-btn {
            margin: 5px;
            padding: 5px 10px;
            cursor: pointer;
            background: #eee;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        
        .debug-btn:hover {
            background: #e0e0e0;
        }
    </style>
</head>
<body>
    <div class="side-navigation">
        <div class="side-header">
            <div class="workspace-icon">E</div>
            <div class="workspace-name">我的工作区</div>
            <div id="server-status" style="margin-left: 10px; font-size: 12px; color: #999;"></div>
        </div>
        <div class="search-container">
            <input type="text" class="search-input" placeholder="搜索页面..." id="search-input">
            <div class="search-icon">🔍</div>
        </div>
        <div class="pages-section">
            <div class="section-header">
                <span>页面</span>
                <div class="add-page-btn" id="add-root-page">+</div>
            </div>
            <ul class="pages-tree" id="pages-tree">
                <!-- 页面内容将通过navigation.js动态生成 -->
            </ul>
        </div>
    </div>

    <div class="sidebar">
        <div class="sidebar-title">书签面板</div>
    </div>
    <div class="background-container" style="display: none;">
        <div id="bg1" class="background-layer active"></div>
        <div id="bg2" class="background-layer"></div>
        <div id="bg3" class="background-layer"></div>
    </div>
    <div class="container">
        <div class="editor-container">
            <div class="toolbar">
                <button onclick="formatText('bold')">粗体</button>
                <button onclick="formatText('italic')">斜体</button>
                <button onclick="formatText('h1')">标题</button>
                <button onclick="forceSaveAllData()">保存</button>
                <button onclick="toggleColorPicker()">更换纸张颜色</button>
                <div id="colorPicker" class="color-picker" style="display: none;">
                    <div class="color-option" data-color="#ffffff" style="background-color: #ffffff;" title="默认白色"></div>
                    <div class="color-option" data-color="#f8f4e9" style="background-color: #f8f4e9;" title="米色"></div>
                    <div class="color-option" data-color="#edf6ff" style="background-color: #edf6ff;" title="淡蓝"></div>
                    <div class="color-option" data-color="#f0f7f0" style="background-color: #f0f7f0;" title="淡绿"></div>
                    <div class="color-option" data-color="#fff6f6" style="background-color: #fff6f6;" title="淡粉"></div>
                </div>
            </div>
            <div id="editor" contenteditable="true" oninput="autoSave()"></div>
        </div>
    </div>

    <!-- 图片书签面板 -->
    <div class="bookmark-panel" id="bookmarkPanel">
    </div>

    <div class="chat-input-container">
        <textarea id="user-input" placeholder="输入消息..."></textarea>
        <div class="input-buttons">
            <select id="model-select" class="model-select">
                <option value="qwen">通义千问</option>
                <option value="deepseek">Deepseek</option>
                <option value="r1-qwen-32">Qwen-32B</option>
                <option value="r1-llama-70">Llama-70B</option>
                <option value="qwq-32b">QWQ-32B(思考+回答)</option>
            </select>
            <button id="send-button">
                <i class="fas fa-paper-plane"></i>
            </button>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="config-manager.js"></script>
    <script src="settings.js"></script>
    <script src="config.js"></script>
    <script src="data-service.js"></script>
    <script src="background.js"></script>
    <script src="editor.js"></script>
    <script src="ai.js"></script>
    <script src="image.js"></script>
    <script src="bookmark.js"></script>
    <script src="navigation.js"></script>
    <script>
        // 检查服务器状态
        async function checkServerStatus() {
            try {
                const response = await fetch('/');
                if (response.ok) {
                    document.getElementById('server-status').textContent = '已连接';
                    document.getElementById('server-status').style.color = '#4caf50';
                }
            } catch (error) {
                document.getElementById('server-status').textContent = '未连接';
                document.getElementById('server-status').style.color = '#f44336';
            }
        }

        // 定期检查服务器状态
        setInterval(checkServerStatus, 5000);
        checkServerStatus();
    </script>
</body>
</html>